Code Editor

The browser-based code editor is used to display and edit JavaScript and CSS in the portal. This topic describes the main features.

Theme

You can customise the appearance of the code editor using the Theme drop-down list, which appears on the WebApplications page.

Syntax highlighting

The editor applies colour syntax highlighting according to the category of terms.

Word completion

The editor supports automatic word completion known as IntelliSense. If the language service matches one or more possible completions, the IntelliSense suggestions will pop up as you type, for example:

Without typing anything, you can manually trigger the IntelliSense list by pressing Ctrl+Space.

Note | If you have created some custom functions in the editor, the IntelliSense list will include your functions in its global list.

You can navigate through the pop-up list using the keyboard Up and Down arrows. Press Enter to select an entry.

Press Ctrl+Space or click the Information symbol to see additional information for the current suggestion like this:

Matching brackets

Matching brackets are highlighted when the cursor is near one of the pair.

Tip: You can jump to the matching bracket using Ctrl+Shift+\.

Presentation

You can change the editor’s font size using Ctrl and + or Ctrl and -.

Press F2 to show the editor in full screen mode and press ESC to exit full screen mode.

Find and Replace

The editor supports a Find, and an optional Replace function. You can access Find with Ctrl+f or from the Command Palette pop-up.

To display or hide the Replace function, click the toggle shown in the screenshot above.

Context menu

A right-click on any keyword in the editor brings up the context menu. The context menu shows a list of actions you can take. Some actions are specific to the context of the keyword where you clicked; others such as Format Document are general.

Command palette

The Command Palette pop-up displays all the commands available in the editor and allows you to execute a selected command. To show the palette, press F1, or right-click to bring up the Context menu, and then click Command Palette.

Documentation

You can document custom JavaScript functions using a simplified JSDoc format. Once documented, the code editor will display the documentation in a pop-up when you hover over a documented function.

JSDoc comments should generally be placed immediately before the code being documented. Each comment must start with a /** sequence in order to be recognised by the JSDoc parser. Comments beginning with /*, /***, or more than 3 stars will be ignored. This is a feature to allow you to suppress parsing of comment blocks.

The simplest documentation is just a description, for example:

/** This is a description of the foo function. */
function foo() {
}

Special JSDoc tags can be used to give more information. Tags begin with the '@' symbol, for example:

/** This function retrieves a user's name for display in a control.
* 
@Tutorial https://dsportal.fsidev.co.uk/WebApp/Index/#/app22372/ver25073/form60019
@Author Richard Connors
@Version v1.3
*/
function showUserName() {
  var username = fsi.getLoggedUserName();
  fsi.setById('text-PLGy', 'Hello ' + username + ',');
}